<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>26.轮播图</title>
    <script type="text/javascript" src="../layui-v2.7.6/layui/layui.js"></script>
    <script type="text/javascript" src="../layui-v2.7.6/layui/jquery-1.10.1.js"></script>
    <link rel="stylesheet" href="../layui-v2.7.6/layui/css/layui.css">
</head>
<body>
<div class="layui-carousel" id="test1">
    <div carousel-item>
        <div>条目1</div>
        <div>条目2</div>
        <div>条目3</div>
        <div>条目4</div>
        <div>条目5</div>
    </div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->

<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
         var ins = carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            // ,anim: 'updown' //切换动画方式 默认是左右切换的，upDown就是上下切换
            ,interval: 7000
            //每次切换的时候调用回调函数
            ,change: function(obj){ // 注：v2.7.0 新增
                console.log(obj); // 返回结果
                console.log(obj.index); //当前条目的索引
                console.log(obj.prevIndex); //上一个条目的索引
                console.log(obj.item); //当前条目的元素对象
            }
        });

        //重置轮播
        ins.reload({
            elem: '#test1'
            ,width: '70%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            // ,anim: 'updown' //切换动画方式 默认是左右切换的，upDown就是上下切换
            ,interval: 7000
            //每次切换的时候调用回调函数
            ,change: function(obj){ // 注：v2.7.0 新增
                console.log(obj); // 返回结果
                console.log(obj.index); //当前条目的索引
                console.log(obj.prevIndex); //上一个条目的索引
                console.log(obj.item); //当前条目的元素对象
            }
        });
    });
</script>
</body>
</html>